<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>


<link href="css/external/jquery.colorpicker.css" rel="stylesheet" />
<script src="js/libs/charts/echarts-plain.js"></script>
<script src="js/libs/forms/jquery.colorpicker.js"></script>
<div style="padding:10px" id="priorityContainer">
	<select id="priorityLength">
		<option value="3"${select3 }>三级</option>
		<option value="4"${select4 }>四级</option>
		<option value="5"${select5 }>五级</option>
		<option value="6"${select6 }>六级</option>
		<option value="7"${select7 }>七级</option>
	</select>

	<button id="generalPriority" onclick="saveData()" class="nui-mainbtn">重新生成并保存</button>


	<div id="pColorSetting"></div>

	<div></div>
</div>

<div id="priorityChartMain" class="main" style="height:500px"></div>




<script type="text/javascript">

	isperp.initElement("#priorityContainer");
	 
	
	var yxjArrZh = [ "一级", "二级", "三级", "四级", "五级", "六级", "七级" ];
	
	

	var options = {
		tooltip : {
			trigger : 'axis',
			showDelay : 0,
			axisPointer : {
				type : 'cross',
				lineStyle : {
					type : 'dashed',
					width : 1
				}
			}
		},
		legend : {
			data : []
		},
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataZoom : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		xAxis : [ {

			type : 'value',
			power : 1,
			splitNumber : 5,
			scale : true
		} ],
		yAxis : [ {
			type : 'value',
			power : 1,
			splitNumber : 5,
			scale : true
		} ],
		series : []
	};
	

	function setPColorSetting(){
		var yxjFontColor=[${priorityColorStr}];
		
		var priorityLength = parseInt($("#priorityLength").val());
		$("#pColorSetting").html("");
		var html="";
		for(var i=0;i<priorityLength;i++){
			html+="<input type='text' class='colorpicker' >";
			
		}
		$("#pColorSetting").html(html);
		
		$(".colorpicker").colorpicker({ history: false,transparentColor: true});
	}

 	//根据选择产生优先级各个数据点
	function ininYxj(jjd,yxd) {
		var priorityLength = parseInt($("#priorityLength").val());

		var yxj = new Array(priorityLength);
		yxj[0] = jjd[0] + yxd[0];//最高
		yxj[priorityLength - 1] = jjd[jjd.length-1] + yxd[yxd.length-1];//最低

		var ch = yxj[0] - yxj[priorityLength - 1];
		
		var endIndex= priorityLength ;
		
		var setpVal = ch / (priorityLength-1);

		for ( var i = 0; i <endIndex; i++) {
			yxj[i] = yxj[0] -   i * setpVal;
		}
		return yxj;
	}

	function initYxjData(jjd,yxd) {
		
		//异步获取紧急度及影响度
		var jLen = jjd.length;

		var yLen = yxd.length;
		var d = [];
		for ( var i = 0; i < jLen; i++) {
			for ( var j = 0; j < yLen; j++) {
				d.push([ jjd[i], yxd[j], (jjd[i] + yxd[j]) ]);
			}
		}

		return d;

	}

	function initOptions() {
		

		var priorityLength = parseInt($("#priorityLength").val());

		options.legend.data = yxjArrZh.slice(0, priorityLength);

		var optionSeries = new Array(priorityLength);
		//
		var jjd=[],yxd=[];
		$.ajax({
		url : "app/settingConfig/getUrgencyAndEffect",
		data:{"urgencyCode":"${urgencyCode}","effectCode":"${effectCode}"},
		async : false,
		cache : false,
		dataType:"json",
		success : function(data) {
			var jjdc=data[0];
			var yxdc=data[1];
			
			for(var i=0;i<jjdc.length;i++){
				jjd.push(parseInt(jjdc[i]));
			}
			for(var i=0;i<yxdc.length;i++){
				yxd.push(parseInt(yxdc[i]));
			}
		}
		});
		
		var yxj = ininYxj(jjd,yxd);
		var yxjData=initYxjData(jjd,yxd);
		
		

		var yxjLen = yxjData.length;

		var yxj_1 = yxj[0];
		var yxj_2 = yxj[1];
		var yxj_last = yxj[priorityLength - 1];

		var dx1 = [];
		for ( var i = 0; i < yxjLen; i++) {
			if (yxjData[i][2] > yxj_2) {
				dx1.push(yxjData[i]);
			}
		}
		
	
		//最高
		optionSeries[0] = {
			name : yxjArrZh[0],
			type : 'scatter',
			symbolSize : function(value) {
				return value[2]*3;
			},
			data : dx1
		};
		var dxLast = [];

		for ( var i = 0; i < yxjLen; i++) {
			if (yxjData[i][2] <= yxj_last) {
				dxLast.push(yxjData[i]);
			}
		}
		//最低
		optionSeries[priorityLength - 1] = {

			name : yxjArrZh[priorityLength - 1],
			type : 'scatter',
			symbolSize : function(value) {
				return value[2]*4;
			},
			data : dxLast
		};

		for ( var i = 1; i < priorityLength - 1; i++) {
			var dx = [];
			var yxj_gt = yxj[i + 1], yxj_lt = yxj[i];
			for ( var k = 0; k < yxjLen; k++) {

				if (yxjData[k][2] > yxj_gt && yxjData[k][2] <= yxj_lt) {
					dx.push(yxjData[k]);
				}
			}
		
			optionSeries[i] = {
				name : yxjArrZh[i],
				type : 'scatter',
				symbolSize : function(value) {
					return value[2]*3;
				},
				data : dx
			};

		}
		
		 

		options.series = optionSeries;
 
		return options;
		

	}
	
	
	//初始化图表数据
	function initChart(){
		var options=initOptions();
		var domMain = document.getElementById('priorityChartMain');
		

		//alert(ss.ss[1])
		myChart = echarts.init(domMain, "macarons");
		window.onresize = myChart.resize;
		 
		myChart.setOption(options, true);
	}
	
	  
	
	
	function　saveData(){
		initChart()
		var pArr="";
		var series= options.series;
		for(var i=0;i<series.length;i++){
			var sdata=series[i].data,name=series[i].name;
			if(sdata){
				var sdataLen=sdata.length;
				if(sdataLen>0)
					pArr+=name+":"+sdata[sdataLen-1][2]+",";
			}
				
		}
		
		$.post("app/settingConfig/prioritySettingSave",{"priorityCode":"${priorityCode}","data":pArr},function(data){
			isperp.alert("优先级数据保存成功！");
			
		});
		
		
	}
	
	 
	
</script>

<c:if test="${not empty priorityCode }">

	<script type="text/javascript">$(document).ready(function(){initChart();});</script>
</c:if>